<template>
  <!-- 图片引导页 -->
  <view id="guide">
    <image :src="IMAGES.GUIDE"></image>
    <!-- <swiper class="swiper" :indicator-dots="true" :current="tabIndex" @change="changeTab">
      <swiper-item class="item" v-for="(item, index) in guidelList" :key="index">
        <image :src="item" mode="aspectFill"></image>
        <view v-if="tabIndex === guidelList.length - 1 && isShowBtn" class="btn" @click="goIndex"><view>立即体验</view></view>
      </swiper-item>
    </swiper> -->
  <!-- </view> -->
  <!-- 视频引导页 -->
  <!-- <view id="guide">
    <video
      id="video"
      src="http://192.168.3.105:8080/upload/videos/1.mp4"
      :direction="0"
      :autoplay="false"
      :controls="false"
      :show-play-btn="false"
      :show-center-play-btn="false"
      :enable-progress-gesture="false"
      objectFit="fill"
      @timeupdate="timeupdate"
      @ended="goIndex"
    ></video> -->
    <cover-view @click="goIndex">立即体验</cover-view>
  </view> 
</template>

<script>
import { IMAGES } from "@/config/resources";

export default {
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      // tabIndex: 0,
      // guidelList: IMAGES.GUIDE_IMGS,
      isShowBtn: false
    };
  },
  onLoad() {
    setTimeout(() => {
      this.isShowBtn = true;
    }, 3000);
  },
  onShow() {
    // let videoContext = uni.createVideoContext("video", this);
    // videoContext.play();
  },
  methods: {
    // changeTab({ detail }) {
    //   this.tabIndex = detail.current;
    // },
    // timeupdate(event) {
    //   uni.getSystemInfo({
    //     success: data => {
    //       if (data.platform == "ios") {
    //         if (event.detail) {
    //           event.detail.diff = event.detail.duration - event.detail.currentTime;
    //           if (event.detail.diff < 0.4) {
    //             this.goIndex();
    //           }
    //         }
    //       }
    //     }
    //   });
    // },
    goIndex() {
      if (this.$store.state.user.isLogin) {
        uni.switchTab({
          url: "/pages/common/home/index"
        });
      } else {
        uni.reLaunch({
          url: "/pages/common/login"
        });
      }
    }
  },
  watch: {
    // tabIndex(n) {
    //   if (n === this.guidelList.length - 1) {
    //     setTimeout(() => {
    //       this.isShowBtn = true;
    //     }, 1000);
    //   }
    // }
  }
};
</script>

<style lang="scss">
#guide {
  overflow: hidden;
  height: 100%;
  width: 750upx;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
  // video{
  //   width: 100%;
  //   height: 100%;
  // }
  cover-view{
    position: absolute;
    z-index: 99999;
    bottom: 100upx;
    left: 0;
    right: 0;
    width: 300upx;
    background-color: #1CBBB4;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
    padding: 20upx 100upx;
    border-radius: 2500upx;
  }
}
// .swiper,
// .item {
//   height: 100%;
//   width: 750upx;
//   image {
//     width: 100%;
//     height: 100%;
//   }
//   .btn {
//     position: absolute;
//     left: 0;
//     right: 0;
//     bottom: 130upx;
//     width: 80%;
//     background-color: #1cbbb4;
//     color: #ffffff;
//     text-align: center;
//     margin: 0 auto;
//     line-height: 80upx;
//     border-radius: 2500upx;
//   }
// }
</style>
